<template>
	<div class="all">
		<div class="container">
			<div class="elm">商家后台管理系统</div>
			<form>
				<el-input class="el-form-item" placeholder="用户名" v-model.trim="input1" clearable @blur="name">
				</el-input>
				<div class="tip" :class="{ active: tip1 }">请输入用户名</div>
				<el-input class="el-form-item" placeholder="密码" v-model="input2" show-password @blur="password"></el-input>
				 <div class="tip" :class="{ active: tip2 }">请输入密码</div>
				 <el-button  class="elb el-form-item" type="primary" size="medium" @click="submitForm">登录</el-button>
			</form>
		</div>
		
	</div>
</template>

<script>
	import {login, getAdminInfo} from '../api/getData.js'
	import {mapActions, mapState} from 'vuex'
	export default{
		data(){
			return{
				input1:'',
				input2:'',
				tip1: false,
				tip2: false
			}
		},
		computed:{
			...mapState(['adminInfo']),
		},
		watch:{
			adminInfo: function (newValue){
				if (newValue.id) {
					this.$message({
			            type: 'success',
			            message: '检测到您之前登录过，将自动登录'
			        });
					this.$router.push({path:'/index'})
				}
			}
		},
		methods:{
			name(){
				if(this.input1.length < 1){
					this.tip1 = true
				}else{
					this.tip1 = false
				}
			},
			password(){
				if(this.input2.length < 1){
					this.tip2 = true
				}else{
					this.tip2 = false
				}
			},
			...mapActions(['getAdminData']),
			async submitForm(){
				if(this.input1.length > 1 && this.input2.length > 1 && this.tip1 == false && this.tip2 == false){
					const res = await login({user_name: this.input1, password: this.input2})
					if(res.status == 1){
						this.$message({
							type: 'sucess',
							message: res.success
						})
						this.$router.push({path:'/index'})
					}
					else{
						this.$message({
						    type: 'error',
						    message: res.message + res.status
						});
					}
				}else{
					this.$notify.error({
						title: '错误',
						message: '请输入正确的用户名密码',
						offset: 100
					});
					return false;
				}
			}
			
			
		},
		mounted(){
		
				this.getAdminData()
			
		},
	}
</script>

<style lang="scss" scoped>
.all{
	width: 100%;
	height: 100vh;		
	background-color: #324057;
	.container{
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 320px;
		height: 210px;
		text-align: center;
		padding-bottom: 50px;
		background-color: white;
		padding: 20px 20px 30px 20px;
		border-radius: 10px;
		.el-form-item{
			margin-bottom: 0;
		}
		.elm{
			position: absolute;
			left: 50%;
			top: 0;
			width: 100%;
			transform: translate(-50%,-150%);
			font-size: 2em;
			color: white;
		}
		.elb{
			width: 100%;
		}
		.tip{
			transform: translateX(5%);
			margin-bottom: 22px;
			font-size: 0.8em;
			color: red;
			text-align: left;
			transition: opacity 0.5s linear;
			opacity: 0;
		}
		.active{
			opacity: 1;
		}
		
	}
}	
	
</style>
